<template>
  <div class="setting-info">
    <div class="custom-title setting-info-title">我的反馈</div>
    <div class="setting-info-box" :loading="state.loading">
      <div class="search">
        <el-input v-model="queryData.name" style="max-width: 30%" placeholder="商品或订单号搜索" @keyup.enter="handleSearch">
          <template #append>
            <el-button :icon="Search" @click.prevent="handleSearch" class="order-search" />
          </template>
        </el-input>
      </div>
      <div style="width: 100%;">
        <el-row :gutter="10" class="list-header">
          <el-col :span="5">
            <div class="item-th">反馈ID</div>
          </el-col>
          <el-col :span="5">
            <div class="item-th">订单编号</div>
          </el-col>
          <el-col :span="5">
            <div class="item-th">反馈时间</div>
          </el-col>
          <el-col :span="7">
            <div class="item-th">我的反馈</div>
          </el-col>
          <el-col :span="2">
            <div class="item-th">操作</div>
          </el-col>
        </el-row>
      </div>
      <div style="width: 100%;">
        <template v-if="state.dataList.length">
          <el-row :gutter="10" v-for="feedback in state.dataList" :key="feedback.id" class="list-row">
            <el-col :span="5">
              <div class="item-td">{{ feedback.id }}</div>
            </el-col>
            <el-col :span="5">
              <div class="item-td">{{ feedback.orderCode }}</div>
            </el-col>
            <el-col :span="5">
              <div class="item-td">{{ $timeDisplay('', '', feedback.ctime) }}</div>
            </el-col>
            <el-col :span="7">
              <div class="item-td">{{ feedback.bz }}</div>
            </el-col>
            <el-col :span="2">
              <div class="item-td td-opt">
                <el-button class="link-button" @click="handleCommand('detail', feedback)" plain>查看详情</el-button>
              </div>
            </el-col>
          </el-row>
        </template>
        <el-empty v-else-if="!state.dataList.length && !state.loading" description="暂无数据" />
      </div>
    </div>
    <el-pagination v-show="state.dataList.length" class="pagination" v-model:current-page="queryData.pageNum"
      :page-size="queryData.pageSize" layout="total, prev, pager, next" :total="state.total"
      @current-change="handleCurrentChange" />
    <custom-dialog title="反馈详情" width="800" custom-class="custom-web" v-model="state.isVisible"
      :disabled="state.disabled" @close="handleCommand('close', $event)">
      <div class="view" v-if="selectItem">
        <div class="view-item">
          <div class="view-item__label">订单反馈：</div>
          <div class="view-item__content">{{ selectItem.bz }}</div>
        </div>
        <div class="view-item">
          <div class="view-item__label">反馈图片：</div>
          <div class="view-item__content"><el-image v-for="(url, index) in selectItem.pics" :key="index"
              style="width: 100px; height: 100px" :preview-src-list="selectItem.pics" :initial-index="index" :src="url" fit="cover" /></div>
        </div>
      </div>
    </custom-dialog>
  </div>
</template>

<script setup name="feedback">
import { appPersonalMyFeedListPost } from '@/api/account'
import { Search } from '@element-plus/icons-vue'
const queryData = reactive({
  name: '',
  type: '1',
  pageNum: 1,
  pageSize: 12
})
const state = reactive({
  dataList: [],
  total: 0,
  loading: false,
  noMore: false,
  isVisible: false,
  disabled: true
})
const selectItem = ref('')
const getList = async () => {
  state.loading = true
  const res = await appPersonalMyFeedListPost({ body: queryData })
  if (res.code === 0) {
    console.log(res)
    res.data.records.forEach(it => {
      it.pics = it.pics ? it.pics.split(',') : []
    })
    state.dataList = res.data.records
    state.total = parseInt(res.data.total)
  }
  state.loading = false
}
const handleCurrentChange = (val) => {
  queryData.pageNum = val
  getList()
}

getList().catch((e) => {
  console.log(e)
})
function handleSearch () {
  state.pageNum = 1
  getList()
}
const handleCommand = (type, item) => {
  if (type === 'detail') {
    state.isVisible = true
    selectItem.value = item
  } else if (type === 'close') {
    state.isVisible = false
    selectItem.value = ''
  }
}
</script>

<style lang="scss" scoped>
.setting-info {
  width: 100%;

  &-title {
    font-size: var(--jbc-font-size-extra-large);
  }

  .setting-info-box {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
  }

  .pagination {
    margin-top: 20px;
    justify-content: center;
  }
}

.list-header {
  background: #F8F8F8;
  border-radius: 8px;

  .item-th {
    font-weight: bold;
    font-size: var(--jbc-font-size-medium);
    color: var(--jbc-font-color);
    line-height: 22px;
    padding: 16px 0;
    text-align: center;
  }
}

.list-row {
  .item-td {
    font-size: 18px;
    color: #666666;
    line-height: 24px;
    text-align: center;
    padding: 19px 0;
    word-break: break-all;

    &.td-opt {
      display: flex;
      flex-direction: column;
    }
  }
}

.search {
  margin-left: -4px;
  margin-right: -4px;
  margin-bottom: 18px;
  width: 100%;

  .order-search {
    background-color: var(--jbc-color);
    border-color: var(--jbc-color);
    color: #FFFFFF;
  }
}

.view {
  &-item {
    display: flex;
    margin-bottom: 10px;

    &__label {
      font-size: var(--jbc-font-size-large);
      font-weight: bold;
      color: #666666;
      line-height: 32px;
    }

    &__content {
      font-size: var(--jbc-font-size-medium);
      color: #333333;
      line-height: 32px;
    }
  }
}
</style>